<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页换肤</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body,
    html {
      height: 100%;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 500px;
      height: 60px;
      margin: 50px auto;
    }

    /* 清除浮动 */
    #skin {
      overflow: hidden;
    }

    #skin li {
      float: left;
      margin-right: 10px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      /* 盒子模型 */
      box-sizing: border-box;
    }

    #skin li:nth-child(1) {
      background-color: red;
    }

    #skin li:nth-child(2) {
      background-color: green;
    }

    #skin li:nth-child(3) {
      background-color: black;
    }

    #nav {
      margin-top: 10px;
      height: 30px;
      border: 1px solid #fff;
    }

    #nav li {
      float: left;
      line-height: 30px;
      padding: 0 25px;
      color: #fff;
      border-right: 1px solid #fff;
      cursor: pointer;
    }

    #nav li:last-child {
      border-right: 0;
    }
  </style>
  <link rel="stylesheet" href="./css/green.css">
  <script>
    window.onload = function () {
      var skin = document.getElementById('skin');
      var lis = skin.getElementsByTagName('li');
      var link = document.querySelector('link');
      for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
          // 排他思想
          for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
          }
          this.className = 'current';
          link['href'] = './css/' + this.id + '.css';
        }
      }
    }
  </script>
</head>

<body>
  <div class="box">
    <ul id="skin">
      <li id="red"></li>
      <li id="green" class="current"></li>
      <li id="black"></li>
    </ul>
    <ul id="nav">
      <li>新闻</li>
      <li>娱乐</li>
      <li>体育</li>
      <li>电影</li>
      <li>音乐</li>
      <li>旅游</li>
    </ul>
  </div>
</body>

</html>